{% extends 'base.html' %}
{% block header %}
  <h1>{% block title %}看板{% endblock %}</h1>
{% endblock %}

{% block user %}
    {% block username%}
        {{ username }}
    {% endblock %}
{% endblock %}

{% block content %}
    <div class="container-fiuled" style="height: 99vh;">
        <div class="row" style="height: 49%; width: 98%; padding-top: 10px">
            <div class="col">
                <div id="bar1" style="width:98%; height:98%;"></div>
            </div>
            <div class="col">
                <div id="bar2" style="width:98%; height:98%;"></div>
            </div>
        </div>
        <div class="row" style="height: 49%; width: 98%; padding-top: 15px">
            <div class="col">
                <div id="bar3" style="width:98%; height:98%;"></div>
            </div>
            <div class="col">
                <div id="bar4" style="width:98%; height:95%;"></div>
            </div>
        </div>
        <div class="row" style="height: 60%; width: 98%">
            <div class="col" style="height: 100%; width: 50%">
                <h5 style="padding-left: 20px; padding-top: 20px"><b>每种处理器相关的提交测试结果中排名第一的记录信息</b></h5>
                <div class="container" style="overflow: hidden; height: 80%; width: 100%; padding-top: 10px">
                    <div style="width: calc(100% + 40px); height: calc(100% + 40px); overflow: auto;">
                        {{ processor|safe }}
                    </div>
                </div>
            </div>
            <div class="col" style="height: 100%; width: 50%">
{#                <div id="bar4" style="width:95%; height:95%;"></div>#}
                <h5 style="padding-left: 20px; padding-top: 20px"><b>每个公司提交的测试结果中排名第一的记录信息</b></h5>
                <div class="container" style="overflow: hidden; height: 80%; width: 100%; padding-top: 10px">
                    <div style="width: calc(100% + 40px); height: calc(100% + 40px); overflow: auto;">
                        {{ company|safe }}
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(
            function () {
                var chart1 = echarts.init(document.getElementById('bar1'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/file_item_num",
                    dataType: 'json',
                    success: function (result) {
                        chart1.setOption(result);
                    }
                });
                var chart2 = echarts.init(document.getElementById('bar2'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/company_submit_num",
                    dataType: 'json',
                    success: function (result) {
                        chart2.setOption(result);
                    }
                });
                var chart3 = echarts.init(document.getElementById('bar3'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/processor_submit_num",
                    dataType: 'json',
                    success: function (result) {
                        chart3.setOption(result);
                    }
                });
                var chart4 = echarts.init(document.getElementById('bar4'), 'white', {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "/update_submit_num",
                    dataType: 'json',
                    success: function (result) {
                        chart4.setOption(result);
                    }
                });
            }
        )
    </script>
{% endblock %}